import { createVNode, render } from 'vue';
import { Input } from 'ant-design-vue';
const vInsertHideInput = {
    mounted(el, binding) {
        const handleKeyPress = (e) => {
            if (e.keyCode === 13) {
                binding.value();
            }
        };
        // 虚拟dom节点
        const vdom = createVNode(Input, { autofocus: true, onKeypress: handleKeyPress, onBlur: (e) => e.target.focus(), style: { padding: 0, width: 0, opacity: 0, border: 'none' } });
        // 真实节点
        const container = (document as any).createElement('div');
        container.style.height = 0;
        // 将虚拟dom挂载到真实节点
        container && render(vdom, container);
        // 打印组件信息
        // console.log('vdom', vdom.component)
        if (el.hideInputContainer) {
            if (el.hideInputContainer.parentNode === el) {
                return;
            }
        }
        el.appendChild(container);
        el.hideInputContainer = container;
    },
    // 注销
    unmounted(el) {
        if (el.hideInputContainer) {
            if (el.hideInputContainer.parentNode) {
                el.hideInputContainer.parentNode.removeChild(el.hideInputContainer);
            }
        }
    }
};

export const setupInsertHideInputDirective = (app: any) => {
    app.directive('insertHideInput', vInsertHideInput);
};